<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

     <button id='getAll'>全选</button>
     <button id='reverse'>反选</button>
     <button id='cancle'>取消</button>
    <hr>
    <div>
          <input type="checkbox" name="" id="">1
          <input type="checkbox" name="" id="">2
          <input type="checkbox" name="" id="">3
          <input type="checkbox" name="" id="">4
          <input type="checkbox" name="" id="">5
          <input type="checkbox" name="" id="">6
          <input type="checkbox" name="" id="">7
          <input type="checkbox" name="" id="">8
    </div>
</body>
</html>
<script>

    let checkboxList = document.querySelectorAll('input[type="checkbox"]');

//全选
document.getElementById('getAll').onclick=()=>{

      for(let checkboxObj of checkboxList ){
        checkboxObj.checked=true;
      }
}

//取消
document.getElementById('cancle').onclick=()=>{
    for(let checkboxObj of checkboxList ){
        checkboxObj.checked=false;
      }
}


//反选
document.getElementById('reverse').onclick=()=>{
    
}


</script>